<template>
    <!-- <canvas ref="canvasEle" class="qrcode" ></canvas> -->
    <img v-if="imgUrl" :src="imgUrl" :style="{ width: labelWidth * ( direction === 'vertical' ? 20 : 10 ) + 'px'  }" />
</template>
<script setup> 
    import { ref, nextTick, watch, onMounted } from 'vue';
    import QRCode from 'qrcode';
    import * as uuid from 'uuid';
    const imgUrl = ref('');

    const props = defineProps({
        info:{ type:Object, default:{} },
        labelWidth:{ type:Number },
        direction:{ type:String }
    })
    const emit = defineEmits(['passCode']);
   
    onMounted(()=>{
        nextTick(() => { 
            // 如果是显示模板列表，显示图片即可，选中再生成条形码
            // 根据条形码生成唯一的哈希字符串
            let code = props.info.checkCode;
            if ( !code ) {
                code = uuid.v4().slice(0, 16);
                nextTick(()=>{
                    emit('passCode', code);
                })
            }    
            QRCode.toDataURL(code, { margin:0  })
            .then(url=>{
                imgUrl.value = url;
                // console.log('url...', url);
            })
            .catch(err=>{
                console.log(err);
            })
                
            
            
        })
    })
</script>